<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
  /*
  总结：
        ES5因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助function的作用域来解决外面变量的问题
        ES6中，加入了let，let它是有if和for的块级作用域
  */

  // 1.变量作用域，变量在什么范围内可用

  /*
  {
    var name = 'rose';
    console.log(name);
  }

  console.log(name);
  */

  // 2.没有块级作用域引起的问题：if的块级

  /*
  var func;
  if(true) {
    var name = 'rose';
    func = function() {
      console.log(name);
    }

    // func();
  }

  name = 'jack';
  func();
  */

  // 3.没有块级作用域引起的问题：for的块级

  /*
  var btns = document.getElementsByTagName('button');
  for(var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
  */

  // 为什么闭包可以解决问题：函数是一个作用域

  /*
  var btns = document.getElementsByTagName('button');
  for(var i = 0; i < btns.length; i++) {
    (function (i) {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击');
      })
    })(i)
  }
  */

  const btns = document.getElementsByTagName('button');
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
</script>
</body>
</html>